<template>
  <div clsss="login-container">
    <!-- 导航栏 -->
    <van-nav-bar title="登录">
      <template #left
        ><img src="@/assets/image/log.png" class="log"
      /></template>
    </van-nav-bar>
    <!-- 用户登录 -->
    <!-- 
      @submit: 表单的提交事件，如果每个表单项添加了rules检验规则
      那么只有在所有的表单项都校验成功了，才会触发submit事件
     -->
    <!-- <van-form @submit="loginAction(loginForm)"> -->
    <van-form @submit="onSubmit">
      <!-- 手机号 -->
      <van-field
        v-model="loginForm.mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '请填写正确格式的手机号' },
        ]"
      />
      <!-- 验证码 -->
      <van-field
        v-model="loginForm.code"
        label="验证码"
        placeholder="验证码"
        :rules="[
          { required: true, message: '请填写验证码' },
          { pattern: /^\d{6}$/, message: '请填写正确的验证码' },
        ]"
      />
      <!-- 登录 -->
      <div style="margin: 16px">
        <van-button
          :loading="isLoading"
          round
          block
          type="info"
          native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import { mapActions } from "vuex";
export default {
  name: "LoginView",
  data() {
    return {
      loginForm: {
        mobile: "13000000000",
        code: "246810",
      },
      //控制登录按钮的加载状态
      isLoading: false,
    };
  },
  methods: {
    // ...mapActions("user", ["loginAction"]),
    async onSubmit() {
      try {
        this.isLoading = true;
        await this.$store.dispatch("user/loginAction", this.loginForm);
        // 登录成功提示
        this.$toast.success("登陆成功");
        // 跳转至首页
        this.$router.replace(this.$route.query.redirectUrl || "/");
        // srouter.push(): 路由跳转，可以回退
        // $router.replace(): 路由跳转,不可以回退
        // $router.back():后退一步
        // $router.forward():前进一步
        // $router.go():即可前进也可后退
        // $router.go(1):前进1步
        // $router.go(-2):后退2步
      } catch (e) {
        this.$toast.fail("登陆失败");
        console.log(e);
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

<style scoped>
.log {
  width: 100px;
}
</style>